<template>
  <!-- 添加和修改章节表单 -->
  <el-dialog :visible.sync="dialogVisible" :title="title" @close="close">
    <el-form
      ref="chapterForm"
      :rules="chapterFormRules"
      :model="chapter"
      label-width="120px"
      status-icon>

      <el-form-item label="章节名称" prop="name">
        <el-input v-model="chapter.name" maxlength="50" show-word-limit/>
      </el-form-item>

      <el-form-item label="章节排序">
        <el-input-number
          v-model="chapter.sort"
          :min="0"
          :max="999"/>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="saveOrUpdate">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import { getChapterById, updateChapterById, saveChapter } from '@/api/chapter'
  import { validNormal } from '@/utils/validate'

  export default {

    // 父组件向子组件传值
    props: {
      courseId: {
        type: String,
        default: null
      }
    },

    data() {

      //检验章节名称
      const validateName = (rule, value, callback) => {
        if (value.length < 5 || value > 50 || !validNormal(value)){
          callback(new Error("请输入正确的课时名称，长度要求为5-50，且不能输入特殊字符"))
        }
        else callback()
      }

      return {
        title: '',
        dialogVisible: false,
        chapter: {  // 章节对象
          courseId: '',
          name: '',
          sort: 0
        },
        //检验规则
        chapterFormRules:{
          name: [{trigger: 'blur',validator: validateName}]
        }
      }
    },

    methods: {
      open(chapterId) {
        this.dialogVisible = true
        if (chapterId) {
          this.title = '修改课程章节'
          getChapterById(chapterId).then(result => {
            this.chapter = result.data.item
            delete this.chapter.gmtCreate
            delete this.chapter.gmtModified
          })
        }
        else {
          this.title = '新增课程章节'
        }
      },

      close() {
        this.$refs.chapterForm.resetFields();
        this.dialogVisible = false
        // 重置表单
        this.resetForm()
      },

      saveOrUpdate() {
        this.$refs.chapterForm.validate((valid) => {
          if (valid) {
            //检验通过
            if (!this.chapter.chapterId) {
              this.save()
            } else {
              this.update()
            }
          }
          else {
            return false
          }
        })
      },

      resetForm() {
        this.chapter.chapterId = ''
        this.chapter.name = ''
        this.chapter.sort = 0
      },

      save() {
        this.chapter.courseId = this.courseId
        saveChapter(this.$qs.stringify(this.chapter)).then(result => {
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
          // 关闭组件
          this.close()
          // 调用父组件监听函数
          this.$emit('onSaveSuccess')
        })
      },

      update() {
        updateChapterById(this.chapter.chapterId, this.$qs.stringify(this.chapter)).then(result => {
          this.$message({
            type: 'success',
            message: '修改成功！'
          })
          // 关闭组件
          this.close()
          // 调用父组件监听函数
          this.$emit('onSaveSuccess')
        })
      }
    }
  }
</script>

<style scoped>

</style>
